<template>
  <div>
    组件
    <h3>新建一个表单，能添加完成，被其它页面调用</h3>
    <button @click="sisui">新增一个</button>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
      <el-table-column
        prop="province"
        label="省份"
        width="120"
      />
      <el-table-column
        prop="city"
        label="市区"
        width="120"
      />
      <el-table-column
        prop="address"
        label="地址"
        width="300"
      />
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="日期">
          <el-input v-model="form.data" />
        </el-form-item>
        <el-form-item label="名字">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="form.province" />
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="form.city" />
        </el-form-item>
        <el-form-item label="地址全程">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="form.zip" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="yun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import bus from '../../../components/EventBus'

export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        data: '',
        name: '',
        province: '',
        city: '',
        address: '',
        zip: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
      this.dialogVisible = !this.dialogVisible
    },
    handleClick(row) {
      console.log(row)
    },
    sisui() {
      this.dialogVisible = !this.dialogVisible
      console.log('111')
    },
    yun() {
      this.dialogVisible = !this.dialogVisible
      console.log(this.form)
      this.tableData.push(this.form)
      this.form = {}
      console.log(this.tableData)
    },
    xiaomiao() {
      // bus.$emit('test', this.tableData)
      console.log(this.tableData)
    }
  }
}
</script>

<style>

</style>
